<template>
  <div>
    <h1>登录页</h1>
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <button @click="login">登录</button>
  </div>
</template>

<script setup>

import { ref } from 'vue'
import { useRouter } from 'vue-router'

const username = ref('')
const password = ref('')
const router = useRouter()

const login = async () => {
  let {data, pending, error, refresh } = await useFetch('/api/login', {
    method: 'POST',
    body: {
      username: username.value,
      password: password.value
    }
  })
  if(data.value?.status === 200){
    console.log('登录成功')
    router.push('/')
  }
  else{
    alert('用户名或密码错误')
  }
}
</script>